<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自定义信息框</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }
        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src='../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var host = document.location.toString().match(/file:\/\//)?"http://localhost:8090":'http://' + document.location.host;
        var map, layerWorld,marker,markers;
        var url=host+"/iserver/services/map-world/rest/maps/World";

        function init(){
            //map上添加控件
            map = new SuperMap.Map("map",{controls: [
                new SuperMap.Control.ScaleLine(),
                new SuperMap.Control.Zoom(),
                new SuperMap.Control.LayerSwitcher(),
                new SuperMap.Control.Navigation({  //添加导航控件到map
                    dragPanOptions: {
                        enableKinetic: true    //拖拽动画
                    }
                })]
            });

            //定义layerWorld图层，获取图层服务地址
            layerWorld = new SuperMap.Layer.TiledDynamicRESTLayer("World", url);
            //为图层初始化完毕添加layerInitialized事件
            layerWorld.events.on({"layerInitialized": addLayer});
            //初始化标记图层类
            markers = new SuperMap.Layer.Markers("Markers");

            layerWorld.events.on({"layerInitialized": addMarker});

        }
        var infowin = null;
        //定义mouseClickHandler函数，触发click事件会调用此函数
        function mouseClickHandler(event){
            closeInfoWin();
            //初始化popup类
            popup = new SuperMap.Popup(
                    "chicken",
                    marker.getLonLat(),
                    new SuperMap.Size(175,140),
                    '<img src="images/Beijing.jpg">',
                    true,
                    null
            );
            //设置弹窗的边框样式
            popup.setBorder("solid 2px #6CA6CD");
            //允许弹出内容的最小尺寸
            popup.mixSize = 200;

            infowin = popup;
            //添加弹窗到map图层
            map.addPopup(popup);
        }

        function closeInfoWin(){
            if(infowin){
                try{
                    infowin.hide();
                    infowin.destroy();
                }
                catch(e){}
            }
        }

        //定义addLayer函数，触发 layerInitialized事件会调用此函数
        function addLayer(){
            //map上添加分块动态REST图层和标记图层
            map.addLayers([layerWorld,markers]);
            map.setCenter(new SuperMap.LonLat(118, 40), 6);
        }

        //定义addMarker函数，触发layerInitialized事件会调用此函数
        function addMarker(){
            size = new SuperMap.Size(21,25);
            offset = new SuperMap.Pixel(-(size.w/2), -size.h);
            icon = new SuperMap.Icon('images/markerbig_select.png', size, offset);
            //初始化标记覆盖物类
            marker = new SuperMap.Marker(new SuperMap.LonLat(116.38810,39.90602),icon);

            //添加覆盖物到标记图层
            markers.addMarker(marker);
            //注册 click 事件,触发 mouseClickHandler()方法
            marker.events.on({"click":mouseClickHandler,
			"touchstart":mouseClickHandler    //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
			});
        }

        //设置弹出框的背景颜色.
        function changecolor(){
            var colorStr = document.getElementById('popupColor').value;
            if(colorStr){
                popup.setBackgroundColor(colorStr);
            }
        }
        //设置弹出框的透明度.
        function changeopacity(){
            var opacityStr = document.getElementById('popupOpacity').value;
            popup.setOpacity(opacityStr);
        }
    </script>
</head>
<body onload="init()">
<div id="toolbar">
    <span>颜色：</span>
    <input style='width:80px' id='popupColor' value='#66CDAA'/>
    <input type="button" class="btn" value="设置背景色" onclick="changecolor()" />
    <span>透明度：</span>
    <input style='width:80px' id='popupOpacity' value='0.5'/>
    <input type="button" class="btn" value="修改透明度" onclick="changeopacity()"/>
</div>
<div id="map"></div>
</body>
</html>
